<template>
    <div class="rx-application-home">
        <div class="rx-app-header">
            <div class="rx-app-text">Hi，{{ i18n('title.createApp', '开始创建您的应用') }}~</div>
            <div class="rx-app-toolbar">
                <div class="rx-app-btn-box">
                    <rx-button alias="designAppAdd" :butn-type="'primary'" :show-no-right="false" @click="add">
                        {{ i18n('button.create', '创建应用') }} </rx-button
                    >&nbsp;&nbsp;
                    <rx-button
                        alias="designAppImport"
                        :butn-icon="'import'"
                        :butn-type="'primary'"
                        :show-no-right="false"
                        @click="doImport"
                    >
                        {{ i18n('button.import', '导入应用') }}
                    </rx-button>
                    <a-dropdown>
                        <a-menu slot="overlay">
                            <a-menu-item key="1" @click="downloadFront">
                                {{ i18n('button.frontEndCode', '前端代码下载') }}
                            </a-menu-item>
                            <a-menu-item key="2" @click="downloadBackend">
                                {{ i18n('button.backEndCode', '后端代码下载') }}
                            </a-menu-item>
                        </a-menu>
                        <a-button
                            ><my-icon type="iconcloud-download" /> {{ i18n('button.download', '下载') }}
                            <a-icon type="down" />
                        </a-button>
                    </a-dropdown>
                </div>
                <div class="rx-app-search-box">
                    <a-input-group compact>
                        <a-input
                            v-model.trim="searchContent"
                            @change="searchChange"
                            style="width: calc(100% - 46px)"
                            :placeholder="i18n('button.searchApp', '搜索应用')"
                            allowClear
                        />
                        <a-button @click="searchApp" type="primary"><my-icon type="iconsearch" /></a-button>
                    </a-input-group>
                </div>
            </div>
        </div>
        <div class="rx-app-list-content" ref="rx-app-list-content">
            <div class="rx-app-roll">
                <a-tabs class="rx-app-tabs" v-model="tabActiveKey" :tabBarGutter="0" :animated="false"
                    ><a-tab-pane
                        :key="obj.key"
                        :tab="getName(obj)"
                        v-for="obj of searchApps.length > 0 ? searchApps : appList"
                    >
                        <div class="rx-app-list" :class="{ 'rx-app-list-no-page': obj.apps.length <= obj.pageSize }">
                            <template v-for="app of pageData(obj)">
                                <div class="rx-app-item" :key="app.appId" :ref="`rx-app-${app.appId}`">
                                    <div class="rx-app-title-box">
                                        <span class="rx-app-icon" :style="{ backgroundColor: app.backColor }">
                                            <my-icon :type="app.iconPic" v-if="getIconType(app.icon)" />
                                            <a-icon :type="app.iconPic" v-else />
                                        </span>
                                        <div class="rx-app-title" :title="getAppName(app.clientName)">
                                            {{ getAppName(app.clientName) }}
                                        </div>
                                        <span
                                            class="rx-app-state"
                                            :class="{ 'rx-app-state-paused': app.status === '0' }"
                                            >{{ getStatus(app.status) }}</span
                                        >
                                    </div>
                                    <div class="rx-app-describe" :title="app.descp">
                                        {{ app.descp ? app.descp : i18n('tips.noDescipt', '暂无描述') }}
                                    </div>
                                    <div class="rx-update-time flow-item-li" :title="app.updateTime">
                                        {{ i18n('tips.updateTime', '修改时间') }}:
                                        <span class="rx-value-color"> {{ app.updateTime }}</span>
                                    </div>
                                    <div class="rx-app-state-box">
                                        <div
                                            class="rx-set-icon"
                                            @click="develop(app)"
                                            :title="i18n('button.design', '设计')"
                                        >
                                            <my-icon type="iconshejifei" class="rx-icon-design" style="" />
                                            <span>{{ i18n('button.design', '设计') }}</span>
                                        </div>
                                        <div
                                            class="rx-set-icon"
                                            @click="appPreview(app)"
                                            :title="$ti18('rxList.previews', '预览')"
                                        >
                                            <my-icon type="iconbrowse" class="rx-icon-design" />
                                            <span>{{ $ti18('rxList.previews', '预览') }}</span>
                                        </div>
                                        <div
                                            class="rx-app-extend-btn"
                                            @mouseenter="setMenuPlace($event, app)"
                                            @mousemove="setAppId(app)"
                                            @mouseleave="removeAppId"
                                        >
                                            <img src="@/assets/icons/rx-ico-more.png" />
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="rx-app-page-box" v-if="obj.apps.length > obj.pageSize">
                            <a-pagination
                                v-model="obj.page"
                                size="small"
                                :total="obj.apps.length"
                                :pageSize="obj.pageSize"
                            />
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
        <div
            class="rx-app-menu-container"
            :class="{ 'rx-app-menu-top': menuTop }"
            :ref="`menu_${moveAppId}`"
            v-show="moveAppId"
            :style="menuStyle"
            @mousemove="setAppId(moveApp)"
            @mouseleave="removeAppId('menu')"
        >
            <div class="rx-app-menu-box">
                <ul class="rx-app-menu-ul">

                    <li @click="edit(moveApp)" v-if="isManager(moveApp.appId)" :title="$ti18('rxList.editBtn', '编辑')">
                        <my-icon type="iconedit" />
                        <span>{{ $ti18('rxList.editBtn', '编辑') }}</span>
                    </li>

                    <li
                        @click="authorize(moveApp)"
                        v-if="isManager(moveApp.appId)"
                        :title="i18n('button.empower', '授权')"
                    >
                        <my-icon type="iconquanxian" />
                        <span>{{ i18n('button.empower', '授权') }}</span>
                    </li>
                    <li @click="doExport(moveApp)" :title="i18n('button.exportBtn', '导出')">
                        <my-icon type="icona-exportdata" />
                        <span>{{ i18n('button.exportBtn', '导出') }}</span>
                    </li>
                    <li
                        @click="delById(moveApp.appId)"
                        v-if="isManager(moveApp.appId)"
                        :title="$ti18('rxList.delBtn', '删除')"
                    >
                        <my-icon type="icontrash" />
                        <span>{{ $ti18('rxList.delBtn', '删除') }}</span>
                    </li>
                    <li @click="copy(moveApp)" v-if="isManager(moveApp.appId)" :title="i18n('button.copyBtn', '复制')">
                        <my-icon type="iconfuzhi" />
                        <span>{{ i18n('button.copyBtn', '复制') }}</span>
                    </li>
                    <li
                        @click="copyUrl(moveApp)"
                        v-if="moveApp.extUser"
                        :title="i18n('button.copyLogin', '复制登录URL')"
                    >
                        <my-icon type="iconfuzhi" />
                        <span>{{ i18n('button.copyLogin', '复制登录URL') }}</span>
                    </li>
                    <li
                        @click="share(moveApp)"
                        v-if="isManager(moveApp.appId)"
                        :title="i18n('button.shareBtn', '共享')"
                    >
                        <my-icon type="iconshare" />
                        <span>{{ i18n('button.shareBtn', '共享') }}</span>
                    </li>
                    <li @click="shareDetail(moveApp)" :title="i18n('button.share', '查看共享')">
                        <my-icon type="iconVue3_detail" />
                        <span>{{ i18n('button.share', '查看共享') }}</span>
                    </li>
                    <li  @click="devOpsManage(moveApp)"  v-if="isManager(moveApp.appId)" title="DevOps管理">
                        <a-icon type="hdd" /><span>DevOps管理</span>
                    </li>
                    <li  @click="downloadApp(moveApp)" :title="i18n('button.download','下载应用')"><my-icon type="iconcloud-download"/>
                        <span>{{ i18n('button.download','下载应用')}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import SysAppApi from '@/api/system/core/sysApp'
import SysAppManagerApi from '@/api/system/core/sysAppManager'
import applicationBtn from '@/views/application/js/applicationBtn'
import { BaseList } from '@lowcode/jpaas-common-lib'
import { mapState, mapMutations } from 'vuex'
import appPreview from '@/layouts/AppDesignPage/appPreview'
export default {
    name: 'ApplicationIndex',
    mixins: [BaseList, applicationBtn, appPreview],
    data() {
        return {
            searchContent: '',
            searchApps: [],
            tabActiveKey: 'all',
            menuTop: false,
            moveAppId: '',
            moveApp: {},
            appList: [],
            superAdmin: false,
            managerAuths: [],
            menuStyle: {},
            pageSize: 15, //每页多少条
            comment: this.i18n('title.development', '应用开发'),
            //前端应用
            showType_: '0',
        }
    },
    computed: {
        ...mapState({
            menus: (state) => state.appSetting.menus,
        }),
        language() {
            return window.localStorage.getItem('language') || 'zh-CN'
        },
        pageData() {
            return (obj) => {
                let { page, pageSize } = obj
                if (obj.apps.length === 0) {
                    return []
                }
                let arr = obj.apps.slice((page - 1) * pageSize, page * pageSize)
                return arr
            }
        },
        isManager() {
            //是否为某应用的管理员
            return (appId) => {
                //超级管理员用户可以管理所有应用
                if (this.superAdmin) {
                    return true
                }
                //循环匹配管理员权限数组
                let select = this.managerAuths.find((item) => item.appId === appId);
                return !!select
            }
        },
        getClientHeight() {
            return document.body.clientHeight
        },
    },
    created() {
        this.loadData()
    },
    methods: {
        ...mapMutations('appSetting', [
            'setAppKey',
            'setOpenFront',
            'setSelecteKeys',
            'setActiveKey',
            'setActiveFront',
        ]),
        searchChange(e) {
            let { value } = e.target
            if (!value) {
                this.searchApps = []
            }
        },
        searchApp() {
            let { searchContent, appList } = this
            if (!searchContent) {
                this.searchApps = []
                return
            }
            this.searchApps = appList.map((item) => {
                let apps = item.apps.filter((app) => app.clientName.includes(searchContent))
                return {
                    ...item,
                    page: 1,
                    apps,
                    CNT: apps.length,
                }
            })
            //this.tabActiveKey = 'all' ;
        },
        setAppId(app) {
            this.moveAppId = app.appId
        },
        removeAppId(type) {
            this.moveAppId = ''
            if (type == 'menu') {
                this.moveApp = {}
            }
        },
        setMenuPlace(e, app) {
            //设置下拉菜单的位置
            this.moveApp = app
            this.moveAppId = app.appId
            this.$nextTick(() => {
                const { x, y, width, height } = e.target.getBoundingClientRect()
                const { offsetHeight: menuHeight, offsetWidth: menuWidth } = this.$refs[`menu_${app.appId}`]
                let _windowHeight = this.getClientHeight
                let isTop = y + menuHeight > _windowHeight
                this.menuTop = isTop
                let _top = isTop ? y - menuHeight : y + height
                this.menuStyle = {
                    left: x + width - menuWidth + 'px',
                    top: _top + 'px',
                }
            })
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'applicationLang', key)
        },
        getStatus(status) {
            let obj = {
                1: this.i18n('list.enable', '已启用'),
                0: this.i18n('list.disable', '已暂停'),
            }
            return obj[status]
        },
        getIconType(icon) {
            let _icon = new Function('return ' + icon)()
            if (_icon.type) {
                return ['customIcon', 'userCustomIcon', 'jpaasIcon'].includes(_icon.type)
            }
            return false
        },
        getName(app) {
            let name = this.getAppName(app.CNAME)
            return `${name}(${app.CNT})`
        },
        getAppName(name) {
            let lang = this.language
            try {
                let _name = new Function('return ' + name)()
                return this.$i18(_name)
                //return _name[lang]
            } catch (e) {
                return name
            }
        },
        setApps(appList) {
            let self_ = this
            let params = { CID: '-1' }
            //按分类加载应用数据
            SysAppApi.getByCategoryOrKey(params).then((res) => {
                if (!res.success) {
                    self_.$message.error(res.message)
                    return
                }
                //设置
                appList[0].apps = res.data
                appList[0].CNT = res.data.length

                for (let app of appList) {
                    if (app.CID != 'all') {
                        app.apps = res.data.filter((item) => item.categoryId === app.CID)
                    }
                }
                this.appList = appList
            })
        },
        getList(data) {
            let cnt = 0
            let list = data.map((item) => {
                cnt = cnt + item.CNT
                return {
                    ...item,
                    key: item.CID, //分类id
                    pageSize: this.pageSize, //每页条数
                    page: 1, //当前分页
                    apps: [], //当前分类的应用
                }
            })
            let all = this.i18n('list.all', '全部')
            let first = { key: 'all', CID: 'all', CNAME: all, CNT: cnt, apps: [], pageSize: this.pageSize, page: 1 }
            return [first, ...list]
        },
        loadData() {
            let self_ = this
            //创建页面时加载数据
            SysAppApi.getCountByCategory().then((res) => {
                if (!res.success) {
                    self_.$message.error(res.message)
                    return
                }
                let { data } = res
                //统计“全部”的数量，把各分类的数量加起来
                let _list = this.getList(data)
                this.setApps(_list)
            })
            // 加载当前用户的应用管理员权限
            SysAppManagerApi.getManagerOfCurUser().then((res) => {
                //系统管理员
                if (res.message == 'admin') {
                    this.superAdmin = true
                } else {
                    this.managerAuths = res.data
                }
            })
        },
        handleMenuClick() {},
        setStyle() {
            this.$refs['rx-app-list-content'].style = '--appItem:4'
        },
    },
    watch: {
        appList: {
            handler(v) {
                console.log(v)
            },
            deep: true,
        },
    },
}
</script>

<style scoped>
.rx-app-roll {
    --appItem: 5;
}
.rx-application-home {
    height: calc(100% - 48px);
    margin: 24px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-sizing: border-box;
}
.rx-app-list-content {
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.rx-app-header {
    padding: 24px 24px 0;
}
.rx-app-text {
    font-weight: bold;
}
.rx-app-toolbar {
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
}
.rx-app-btn-box button {
    margin-right: 10px;
}
.rx-app-roll {
    inset: 0;
    position: absolute;
    overflow: auto;
    padding: 24px;
}

.rx-app-list {
    overflow: auto;
    height: calc(100% - 56px);
}
.rx-app-list.rx-app-list-no-page {
    height: calc(100% - 20px);
}

.rx-app-item {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - var(--appItem) * 10px) / var(--appItem));
    margin: 0 5px 10px;
    max-height: 186px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(26, 94, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 1);
    border: 1px solid rgba(233, 235, 242, 1);
    font-size: 12px;
    color: rgba(118, 125, 148, 1);
    padding: 16px;
}
.rx-app-title-box {
    display: flex;
    align-items: center;
}
.rx-app-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    color: #fff;
    margin-right: 12px;
}
.rx-app-title {
    flex: 1;
    color: rgba(43, 48, 66, 1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
}
.rx-app-describe {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px 0;
}
.rx-app-state-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid rgba(233, 235, 242, 1);
    gap: 20px;
    padding-top: 10px;
    font-size: 14px;
}
.rx-app-state {
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    line-height: 22px;
    height: 22px;
    background-color: #e8ffea;
    border-radius: 2px;
    color: #00a200;
}
.rx-app-state.rx-app-state-paused {
    background-color: #f2f3f5;
    color: #6d7887;
}

.rx-app-extend-btn {
    display: flex;
    justify-content: flex-end;
    flex: 3;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.rx-app-extend-btn:hover {
    color: #4d9eff;
}
.rx-app-extend-btn:hover .rx-app-merge-icon {
    color: #4285f4;
}
.rx-set-icon {
    color: rgba(26, 94, 255, 1);
    cursor: pointer;
}
.rx-icon-design {
    margin-right: 6px;
}
.rx-app-menu-container {
    position: fixed;
    width: 140px;
    top: 25px;
    right: 0;
    z-index: 999;
}

.rx-app-menu-box {
    position: relative;
    z-index: 2;
    padding: 5px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 31, 82, 0.2);
}
.rx-app-menu-box:before {
    content: '';
    position: absolute;
    top: -2px;
    right: 9px;
    display: block;
    width: 8px;
    height: 8px;
    background: transparent;
    border-style: solid;
    border-width: 4px;
    border-color: #fff #fff transparent transparent;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 0;
}

.rx-app-menu-container.rx-app-menu-top {
    top: auto;
}
.rx-app-menu-container.rx-app-menu-top .rx-app-menu-box:before {
    top: auto;
    bottom: -3px;
    transform: rotate(135deg);
}

.rx-app-menu-ul,
.rx-app-menu-ul li {
    margin: 0;
}
.rx-app-menu-ul > li {
    border-radius: 4px;
    line-height: 32px;
    height: 32px;
    padding: 0 13px;
    font-size: 0;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    overflow: hidden;
    align-items: center;
}
.rx-app-menu-ul > li > i,
.rx-app-menu-ul > li > span {
    font-size: 14px;
}
.rx-app-menu-ul > li > span {
    flex: 1;
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}
.rx-app-menu-ul li:hover {
    background-color: #ecf3fe;
    color: #4285f4;
}

.rx-app-roll >>> .ant-tabs-bar {
    margin-bottom: 0;
    padding-left: 0;
}
.rx-app-tabs >>> .ant-tabs-content {
    height: calc(100% - 34px);
    margin-top: 24px;
}
/* .rx-app-tabs >>> .ant-tabs-bar {
    //border-bottom: 0;
}
.rx-app-tabs >>> .ant-tabs-nav-container {
    //margin-bottom: 0;
}
.rx-app-tabs >>> .ant-tabs-nav-wrap {
    margin-bottom: 0;
    //padding-bottom: 10px;
}
.rx-app-tabs >>> .ant-tabs-ink-bar {
    //display: none!important;
} */
.rx-app-tabs >>> .ant-tabs-tab {
    padding: 0 16px;
    line-height: 32px;
    height: 32px;
    font-size: 14px;
}
.rx-app-tabs >>> .ant-tabs-nav .ant-tabs-tab-active {
    color: #4285f4;
}
.rx-app-page-box {
    padding: 6px 15px;
    display: flex;
    justify-content: flex-end;
}

.rx-value-color {
    color: #333;
}
@media (max-width: 1200px) {
    .rx-app-roll {
        --appItem: 4;
    }
}

@media (max-width: 1000px) {
    .rx-app-roll {
        --appItem: 3;
    }
}
@media (max-width: 800px) {
    .rx-app-roll {
        --appItem: 2;
    }
}
</style>
